import React from 'react';
import Portal from 'components/portal';
import PropTypes from 'prop-types';
import { observer, inject } from 'mobx-react';
import css from './index.less';
import classnames from 'classnames';
import * as CONST from 'common/const';

@inject('store')
@observer
/**
 * 专用于config区域的portal
 */
export default class ConfigPortal extends React.Component {

  static propTypes = {
    onClose: PropTypes.func,
    onOpen: PropTypes.func,
    isOpen: PropTypes.bool,
    className: PropTypes.string,
  };

  static defaultProps = {
    onClose: () => {},
    onOpen: () => {},
    isOpen: false,
    className: '',
  };

  renderPopover() {
    const { store: { simulator }, children, className } = this.props;
    // 弹层定位
    const popoverProps = {
      className: classnames([css.popover, className]),
      style: {
        left: simulator.right + CONST.SPACER * 3 + CONST.CONFIG_WIDTH,
        top: simulator.top
      }
    };

    return (
      <div {...popoverProps}>
        {children}
      </div>
    );
  }

  render() {
    const { store, onClose, isOpen } = this.props;
    if (!store || !store.simulator) return null;
    const props = {
      closeOnOutsideClick: true,
      closeOnEsc: true,
      isOpen,
      onClose
    };

    return (
      <Portal {...props}>
        {this.renderPopover()}
      </Portal>
    );
  }
}
